 *{
 	margin: 0;
 	padding: 0;
 }
 html
{
    background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
    height: 100%;
}

/*居中显示*/
.warpper
{
	perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    position: absolute;
}

.cube
{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: 12s spin linear infinite;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: 12s spin linear infinite;
    -moz-transform-style: preserve-3d;
    -moz-animation: 12s spin linear infinite;
    -ms-transform-style: preserve-3d;
    -ms-animation: 12s spin linear infinite;
}

.cube *
{
	background: 
    linear-gradient(
    left,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px),
    linear-gradient(
    top,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px);

    background-size: 100px 100px;
    
    background: 
    -webkit-linear-gradient(
    left,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px),
    -webkit-linear-gradient(
    top,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px);

    -webkit-background-size: 100px 100px;
    
    -moz-linear-gradient(
    left,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px),
    -moz-linear-gradient(
    top,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px);

    -moz-background-size: 100px 100px;
    
    -ms-linear-gradient(
    left,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px),
    -ms-linear-gradient(
    top,
    rgba(254, 226, 248, 0.5) 0px,
    rgba(254, 226, 248, 0.5) 4px,
    rgba(0, 0, 0, 0) 0px);

    -ms-background-size: 100px 100px;

    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(254, 226, 248, 0.5);
    box-shadow: 0 0 80px rgba(0, 128, 0, 0.4);
    -webkit-box-shadow: 0 0 80px rgba(0, 128, 0, 0.4);
    -moz-box-shadow: 0 0 80px rgba(0, 128, 0, 0.4);
    -ms-box-shadow: 0 0 80px rgba(0, 128, 0, 0.4);

}

/*开始放置每一个面*/

.font
{
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    -ms-transform: translateZ(150px);
    transform: translateZ(150px);
}

.back
{
    -webkit-transform: rotateX(180deg) translateZ(150px);
    -moz-transform: rotateX(180deg) translateZ(150px);
    -ms-transform: rotateX(180deg) translateZ(150px);
    transform: rotateX(180deg) translateZ(150px);
}

.left
{
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    -ms-transform: rotateY(-90deg) translateZ(150px);
    transform: rotateY(-90deg) translateZ(150px);
}

.right
{
    -webkit-transform: rotateY(90deg) translateZ(150px);
    -moz-transform: rotateY(90deg) translateZ(150px);
    -ms-transform: rotateY(90deg) translateZ(150px);
    transform: rotateY(90deg) translateZ(150px);
}

.top
{
    -webkit-transform: rotateX(90deg) translateZ(150px);
    -moz-transform: rotateX(90deg) translateZ(150px);
    -ms-transform: rotateX(90deg) translateZ(150px);
    transform: rotateX(90deg) translateZ(150px);
}

.bottom
{
    -webkit-transform: rotateX(-90deg) translateZ(150px);
    -moz-transform: rotateX(-90deg) translateZ(150px);
    -ms-transform: rotateX(-90deg) translateZ(150px);
    transform: rotateX(-90deg) translateZ(150px);
}

/*实现旋转动画，兼容浏览器*/

@keyframes spin
{
    from
    {
        transform: translateZ(-150px) rotateX(0) rotateY(0deg);
    }

    to
    {
        transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
    }
}

@-webkit-keyframes spin
{
    from
    {
        -webkit-transform: translateZ(-150px) rotateX(0) rotateY(0deg);
    }

    to
    {
        -webkit-transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
    }
}

@-moz-keyframes spin
{
    from
    {
        -moz-transform: translateZ(-150px) rotateX(0) rotateY(0deg);
    }

    to
    {
        -moz-transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
    }
}

@-ms-keyframes spin
{
    from
    {
        -ms-transform: translateZ(-150px) rotateX(0) rotateY(0deg);
    }

    to
    {
        -ms-transform: translateZ(-150px) rotateX(360deg) rotateY(360deg);
    }
}



